<template>
  <div>
    <div class="bgc">
      <el-tree
        :data="treeData"
        :props="treeProps"
        :check-strictly="true"
        default-expand-all
        :default-checked-keys="checkedRoleIds"
        :default-expanded-keys="defaultExpandArr"
        node-key="id"
        ref="tree"
        show-checkbox
        highlight-current
        @check="currentChecked"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    name: 'function',
    data () {
      return {
        limited: false,
        treeData: [], // 组织树数据
        treeProps: { // 组织树获取数据规则
          children: 'children',
          label: 'resourceName'
        },
        defaultExpandArr: [0], // 组织树默认展开数据
        checkedRoleIds: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        checkedKeys: []
      }
    },
    // inject: ['roleInfo', 'item'],
    methods: {
      ...mapActions('permission', ['getPermissions', 'saveAuth']),
      _getRolePermission () {
        // console.log(this.id)
        this.getPermissions({
          id: 77
        }).then(res => {
          // console.log(res)
          this.treeData = []
          this.treeData = res.data
          this.setCheckedKeys()
        })
      },
      setCheckedKeys () {
        console.log(this.treeData)
        // let id = this.id
        // this.checkStrictly = true // 赋值之前先设置为true
        function getCheckIds (tree, ids = []) {
          tree.forEach(item => {
            if (item.checked === 1) ids.push(item.id)
            if (item.id === 28 || item.resourceName === '首页' || item.id === 44 || item.id === 4102) {
              item.disabled = true
              item.children && item.children.map(item => {
                item.disabled = true
                item.children && item.children.map(item => { item.disabled = true })
              })
            }
            if (item.children && item.children.length) {
              getCheckIds(item.children, ids)
            }
          })
          return ids
        }
        let checkedRoleIds = getCheckIds(this.treeData, [])
        console.log('babab', checkedRoleIds)
        this.checkedKeys = checkedRoleIds
        this.$refs.tree.setCheckedKeys(checkedRoleIds)
      },
      currentChecked (nodeObj, SelectedObj) {
        this.checkedKeys = []
        /* 获取所有选中节点的id */
        this.checkedKeys = this.$refs.tree.getCheckedNodes(false, true).map(item => item.id)
      },
      handleCheckChange (data, checked, indeterminate) {
        // console.log(data, checked, indeterminate)
      },
    },
    watch: {
      checkedKeys: function (v) {
        this.$store.commit('permission/setPermissions', { function: this.checkedKeys })
      }
    },
    created () {
      this._getRolePermission()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.bgc {
  width: 760px;
  height: 460px;
  background: #ffffff;
  border-radius: 8px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.bottom-p {
  text-align: right;
  height: 72px;
  line-height: 72px;
  border-radius: 0 0 3px 3px;
  padding: 0 20px;
}
</style>
